import React,{useEffect,useState} from 'react';
import {Button,Card,Form,Input,message,Modal,Select,Table} from 'antd';
import {ArrowRightOutlined,PlusOutlined} from '@ant-design/icons';

import LinkButton from '../../components/LinkButton';
import './index.less';
import {reqAddCategory,reqGetCategoryList,reqUpdateCategory} from '../../api';

/**
 * 二级路由 品类管理
 */
function Category(){
  //存储分类一级列表
  const [categoryList,setCategoryList] = useState([]);
  //存储分类二级列表
  const [subCategoryList,setSubCategoryList] = useState([]);
  //存储父分类id，默认是一级分类
  const [parentId,setParentId] = useState("0");
  //存储categoryName名称展示
  const [categoryName,setCategoryName] = useState();
  //是否展示新增和修改页面 0=关闭 1=新增 2=修改
  const [showStatus,setShowStatus] = useState(0);
  //存储category信息
  const [category,setCategory] = useState();

  /**
   * 获取分类列表
   * 一级 or 二级
   */
  async function reqGetCategory(){
    //调用获取分类列表的方法
    const response = await reqGetCategoryList(parentId);
    //判断获取数据是否成功
    if(response.status === 0){
      //成功后添加到state中
      if(parentId === "0"){
        //一级分类列表
        setCategoryList(response.data);
      }else{
        //二级分类列表
        setSubCategoryList(response.data);
      }
    }else{
      // 获取数据失败！
      message.error("获取数据失败！");
    }
  }

  /**
   * 展示二级分类
   * @param category 一级分类的具体某一个对象
   */
  function showSubCategoryList(category){
    //保存parentId到state中
    setParentId(category._id);
    //保存categoryName到state中
    setCategoryName(category.name);
    //获取二级分类列表
    reqGetCategory().then();
  }

  /**
   * 展示一级分类
   */
  function showCategoryList(){
    setParentId("0");
    setCategoryName(null);
    setSubCategoryList([]);
  }

  /**
   * 页面刷新时调用
   */
  useEffect(function(){
    //调用获取一级分类列表
    reqGetCategory().then();
  },[parentId,showStatus]);

  //卡片左侧
  const title = parentId === "0" ? "一级分类列表" : (
    <span>
      <LinkButton onClick={showCategoryList}>
        一级分类列表
      </LinkButton>
      <ArrowRightOutlined style={{marginLeft: 5,marginRight: 5}}/>
      {categoryName}
    </span>
  );
  //卡片右侧
  const extra = <Button type="primary" onClick={showAddCategory}><PlusOutlined/> 添加</Button>;
  //表格标题
  const columns = [
    {
      title: "分类的名称",
      dataIndex: 'name',
      key: '_id',
    },
    {
      title: "操作",
      width: 300,
      //category获取当前点击列的 dataSource={categoryList}，categoryList信息
      render: (category)=>(
        <span>
          <LinkButton onClick={function(){
            return showUpdateCategory(category);
          }}>修改分类</LinkButton>
          {
            parentId === "0" ?
              <LinkButton onClick={function(){
                return showSubCategoryList(category);
              }}>查看子分类</LinkButton> : null
          }
        </span>
      ),
    }
  ];

  /**
   * 展示新增分类页面
   */
  function showAddCategory(){
    //打开add-form修改分类页面
    setShowStatus(1);
  }

  /**
   * 展示修改分类页面
   */
  function showUpdateCategory(category){
    //点击修改分类时，保存category数据，并且传递到update-form
    setCategory(category);
    //打开update-form修改分类页面
    setShowStatus(2);
  }

  /**
   * 新增或者修改页面，取消点击事件
   */
  function handleCancel(){
    //点击取消关闭页面
    setShowStatus(0);
  }

  /**
   * 新增分类
   * @param values 表单所有数据
   */
  async function onFinishAdd(values){
    //根据表单parentId查询一级列表或者二级列表
    const categoryList = await reqGetCategoryList(values.parentId);
    //判断列表中是否有需要新增的列表名称，如果已存在则返回
    const category = categoryList.data.find(function(category){
      return category.name === values.categoryName;
    });
    //判断分类名称是否存在，如果存在则提示和返回
    if(category){
      message.error("分类名称已存在！");
      return;
    }
    //调用新增分类方法
    const response = await reqAddCategory(values.categoryName,values.parentId);
    //新增是否成功
    if(response.status === 0){
      // 新增成功
      message.success("新增成功！");
    }else{
      // 新增失败
      message.error("新增失败！");
    }
    //信息新增完之后自动关闭页面
    setShowStatus(0);
  }

  /**
   * 修改分类
   * @param values 表单所有数据
   */
  async function onFinishUpdate(values){
    //根据当前category.parentId获取一级分类或者二级分类列表
    const categoryList = await reqGetCategoryList(category.parentId);
    //判断列表中是否有需要修改的列表名称，如果已存在则返回
    const c = categoryList.data.find(function(category){
      return category.name === values.categoryName;
    });
    //判断分类名称是否存在，如果存在则提示和返回
    if(c){
      message.error("分类名称已存在！");
      return;
    }
    //调用修改分类方法
    const response = await reqUpdateCategory(category._id,values.categoryName);
    //修改是否成功
    if(response.status === 0){
      // 修改成功
      message.success("修改成功！");
    }else{
      // 修改失败
      message.error("修改失败！");
    }
    //信息修改完之后自动关闭页面
    setShowStatus(0);
  }

  return (
    <div>
      <Card
        title={title}
        extra={extra}
      >
        <Table
          rowKey="_id"
          bordered
          dataSource={parentId === "0" ? categoryList : subCategoryList}
          columns={columns}
          pagination={{defaultPageSize: 5}}
        />
      </Card>
      <Modal footer={null} destroyOnClose title="新增分类" open={showStatus === 1} onCancel={handleCancel}>
        <Form
          name="add-form"
          className="add-form"
          onFinish={onFinishAdd}
          //根据name展示默认值
          initialValues={{
            //Select框 指定value值
            parentId: parentId,
            categoryName: ""
          }}
        >
          <Form.Item
            label="品类"
            name="parentId"
          >
            <Select>
              <Select.Option value="0">一级分类</Select.Option>
              {
                categoryList.map(function(category){
                  return <Select.Option key={category._id} value={category._id}>{category.name}</Select.Option>
                })
              }
            </Select>
          </Form.Item>
          <Form.Item
            label="名称"
            name="categoryName"
            rules={[
              { required: true,whitespace: true, message: "分类名称不能为空!" },
            ]}
          >
            <Input placeholder="请输入分类名称"/>
          </Form.Item>
          <Form.Item style={{textAlign: 'right'}}>
            <Button onClick={handleCancel} style={{marginRight: 10}}>
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              确定添加
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Modal footer={null} destroyOnClose title="修改分类" open={showStatus === 2} onCancel={handleCancel}>
        <Form
          name="update-form"
          className="update-form"
          onFinish={onFinishUpdate}
          //根据name展示默认值
          initialValues={{
            categoryName: category ? category.name : ""
          }}
        >
          <Form.Item
            label="名称"
            name="categoryName"
            rules={[
              { required: true,whitespace: true, message: "分类名称不能为空!" },
            ]}
          >
            <Input placeholder="请输入分类名称"/>
          </Form.Item>
          <Form.Item style={{textAlign: 'right'}}>
            <Button onClick={handleCancel} style={{marginRight: 10}}>
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              确定修改
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default Category;